<template>
  <!-- 新老会员成交分析 -->
  <div class="components-transaction-analysis">
    <div class="board-title">
      {{ $t('dataAnalysis.transactionAnalysisOfNewAndOldMembers') }}
    </div>

    <!-- 数据指标 -->
    <div class="data-indicators">
      <span>{{ $t('dataAnalysis.dataIndicators') }}</span>
      <el-radio
        :model-value="0"
        disabled
        :label="0"
      >
        {{ $t('dataAnalysis.customers') }}
      </el-radio>
    </div>

    <!-- 表格 -->
    <div class="table-box">
      <el-table
        :data="dataList"
        header-cell-class-name="table-header"
        row-class-name="table-row"
      >
        <el-table-column
          prop="type"
          :label="$t('dataAnalysis.customerType')"
        />
        <el-table-column
          prop="payMemberNum"
          :label="$t('dataAnalysis.newTMNumbers')"
        />
        <el-table-column
          prop="payMemberNumRate"
          :label="$t('dataAnalysis.tradedMembersRatio')"
        />
        <el-table-column
          prop="payOrderNum"
          :label="$t('dataAnalysis.payOrderQuantity')"
        />
        <el-table-column
          prop="pricePerMember"
          :label="$t('dataAnalysis.customerUnitPrice')"
        />
        <el-table-column
          prop="payAmount"
          :label="$t('dataAnalysis.paymentAmount')"
        />
        <el-table-column
          prop="payAmountRate"
          :label="$t('dataAnalysis.proportionOfPaymentAmount')"
        />
      </el-table>
    </div>

    <!-- 趋势指标 -->
    <div class="trend-indicators">
      <span>{{ $t('dataAnalysis.trendIndicators') }}：</span>
      <el-radio-group v-model="trendIndicators">
        <el-radio :label="0">
          {{ $t('dataAnalysis.numberOfTradedMembers') }}
        </el-radio>
        <el-radio :label="1">
          {{ $t('dataAnalysis.payOrderQuantity') }}
        </el-radio>
        <el-radio :label="2">
          {{ $t('dataAnalysis.customerUnitPrice') }}
        </el-radio>
        <el-radio :label="3">
          {{ $t('dataAnalysis.paymentAmount') }}
        </el-radio>
      </el-radio-group>
    </div>

    <!-- 图表 -->
    <div class="chart-content">
      <div
        id="membership-transaction-analysis-chart"
        style="width: 100%; height: 230px;"
      />
    </div>
  </div>
</template>

<script setup>
import * as $echarts from 'echarts'
const props = defineProps({
  dateType: {
    type: Number,
    default: 0
  },
  dateRange: {
    type: Array,
    default: () => ([])
  }
})

watch(() => props.dateRange, () => {
  // 会员概览后台数据
  getMemberOverviewData()
})
const trendIndicators = ref(0) // 趋势指标
watch(() => trendIndicators.value, (val) => {
  switchSixEchart(val)
})

const dataList = ref([])
let tempSixData = []
const getMemberOverviewData = () => {
  let startTime = ''
  let endTime = ''
  if (props.dateRange && props.dateRange.length > 0) {
    startTime = props.dateRange[0]
    endTime = props.dateRange[1]
  }
  const param = {
    dateType: props.dateType,
    startTime,
    endTime
  }
  http({
    url: http.adornUrl('/platform/flowCustomerAnalysis/getMemberDeal'),
    method: 'get',
    params: http.adornParams(param)
  }).then(data => {
    data = data.data
    if (data) {
      // 新老会员数据填充
      data.allMember.type = $t('dataAnalysis.allTradedMember')
      data.newMember.type = $t('dataAnalysis.newTM')
      data.oldMember.type = $t('dataAnalysis.oldTM')
      const tempArr = [data.allMember, data.newMember, data.oldMember]
      tempArr.forEach(i => {
        i.payMemberNumRate = (i.payMemberNumRate * 100).toFixed(2) + '%'
        i.payAmountRate = (i.payAmountRate * 100).toFixed(2) + '%'
      })
      dataList.value = tempArr

      for (let i = 0; i < data.trendParam.length; i++) {
        data.trendParam[i].currentDay = formatDate(data.trendParam[i].currentDay)
      }
      tempSixData = data.trendParam
      switchSixEchart(trendIndicators.value)
    }
  })
}
/**
 * 格式化时间
 */
const formatDate = (date) => {
  const tempDate = date + ''
  return tempDate.substring(0, 4) + '-' + tempDate.substring(4, 6) + '-' + tempDate.substring(6, 8)
}
// 第六部分Echart图切换选项
const radio6BNewTitilArray = reactive([$t('dataAnalysis.newTMNumbers'), $t('dataAnalysis.newTMPN'), $t('dataAnalysis.newTMPP'), $t('dataAnalysis.newTMPaidAmount')]) // 第六部分 Echart新成交会员的标题名列表
const radio6BOldTitilArray = reactive([$t('dataAnalysis.oldTMNumbers'), $t('dataAnalysis.oldTMPN'), $t('dataAnalysis.oldTMPP'), $t('dataAnalysis.oldTMPaidAmount')]) // 第六部分 Echart老成交会员的标题名列表
const trendDateArray = ref([]) // 新老会员成交分析 时间数据
const trendNewArray = ref([]) //  新老会员成交分析 新成交会员数据
const trendOldArray = ref([]) //  新老会员成交分析 老成交会员数据
const radio6BNewTitil = ref(0) // Echart新成交会员的标题名
const radio6BOldTitil = ref(0) // Echart老成交会员的标题名
const switchSixEchart = (trendType) => {
  const myData = tempSixData
  trendDateArray.value = []
  trendNewArray.value = []
  trendOldArray.value = []
  radio6BNewTitil.value = radio6BNewTitilArray[trendType]
  radio6BOldTitil.value = radio6BOldTitilArray[trendType]
  switch (trendType) {
    case 0:
      for (let i = 0; i < myData.length; i++) {
        trendDateArray.value[i] = myData[i].currentDay
        trendNewArray.value[i] = myData[i].newPayMemberNum
        trendOldArray.value[i] = myData[i].oldPayMemberNum
      }
      break
    case 1:
      for (let i = 0; i < myData.length; i++) {
        trendDateArray.value[i] = myData[i].currentDay
        trendNewArray.value[i] = myData[i].newPayOrderNum
        trendOldArray.value[i] = myData[i].oldPayOrderNum
      }
      break
    case 2:
      for (let i = 0; i < myData.length; i++) {
        trendDateArray.value[i] = myData[i].currentDay
        trendNewArray.value[i] = myData[i].newPricePerMember
        trendOldArray.value[i] = myData[i].oldPricePerMember
      }
      break
    case 3:
      for (let i = 0; i < myData.length; i++) {
        trendDateArray.value[i] = myData[i].currentDay
        trendNewArray.value[i] = myData[i].newPayAmount
        trendOldArray.value[i] = myData[i].oldPayAmount
      }
      break

    default:
      for (let i = 0; i < myData.length; i++) {
        trendDateArray.value[i] = myData[i].currentDay
        trendNewArray.value[i] = myData[i].newPayMemberNum
        trendOldArray.value[i] = myData[i].oldPayMemberNum
      }
      break
  }
  getChartData()
}
// 柱状图数据
const getChartData = () => {
  // 有的话就获取已有echarts实例的DOM节点
  let myChart = $echarts.getInstanceByDom(document.getElementById('membership-transaction-analysis-chart'))
  // 如果不存在，就进行初始化
  if (myChart == null) {
    myChart = $echarts.init(document.getElementById('membership-transaction-analysis-chart'))
  }
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: [radio6BNewTitil.value, radio6BOldTitil.value]
    },
    grid: {
      left: 30,
      right: 40,
      top: 55,
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: trendDateArray.value
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: radio6BNewTitil.value,
      type: 'bar',
      data: trendNewArray.value,
      itemStyle: {
        // 定制显示
        color: '#155bd4'
      }
    },
    {
      name: radio6BOldTitil.value,
      type: 'bar',
      data: trendOldArray.value,
      itemStyle: {
        // 定制显示
        color: '#3DD86B'
      }
    }]
  }
  option && myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}

</script>

<style lang="scss" scoped>
.components-transaction-analysis {
  .board-title {
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-bottom: 15px;
  }
  // 数据指标
  .data-indicators {
    font-size: 14px;
    color: #333;
    padding-top: 10px;
  }

  // 趋势指标
  .trend-indicators {
    margin-bottom: 30px;
    font-size: 14px;
    color: #333;
    background: #f7f8fa;
    padding: 20px;
  }

  // 表格
  .table-box {
    margin: 20px 0;
    // eslint-disable-next-line vue-scoped-css/no-unused-selector
    .table-row {
      height: 56px;
    }
  }

  // 图表
  .chart-content {
    margin-bottom: 20px;
  }
}
</style>
